<template>
  <div id="app">
    <div class="pre-img" @click="open(1)">预览图片(插件)</div>
    <el-divider></el-divider>

    <div class="pre-img" @click="open(2)">预览图片(Element 组件)</div>
    <el-divider></el-divider>

    <div class="demo-image__preview">
      <div>预览图片(ElementUI)</div>
      <el-image
        style="width: 200px; height: 200px; margin-top: 20px"
        :src="url"
        :preview-src-list="imgList"
      >
      </el-image>
    </div>

    <template v-if="showViewer">
      <EleImageViewer
        :z-index="2000"
        :initial-index="imageIndex"
        :on-close="closeViewer"
        :url-list="imgList"
        :maskClosable="true"
      />
    </template>
    <PrevImg ref="imgRef"></PrevImg>
  </div>
</template>

<script>
import EleImageViewer from "./components/EleImageViewer.vue";
import PrevImg from "./plugins/prevImg/prevImg.vue";
import img1 from "./static/images/1.jpg";
import img2 from "./static/images/2.jpg";
import img3 from "./static/images/3.jpg";

export default {
  name: "App",
  components: {
    PrevImg,
    EleImageViewer,
  },
  data() {
    return {
      url: img1,
      imgList: [img1, img2, img3],
      imageIndex: 0,
      showViewer: false,
    };
  },
  methods: {
    open(type) {
      if (type === 1) {
        this.$PrevImg.open({ url: this.url, imgList: this.imgList });
      } else {
        this.imageIndex = this.imgList.indexOf(this.url);
        this.showViewer = true;
      }
    },

    closeViewer() {
      this.showViewer = false;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.pre-img {
  color: #fff;
  background: #2c3e50;
  width: 300px;
  height: 35px;
  margin: 10px auto;
  line-height: 35px;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
</style>
